<template>
  <el-card>
    <el-descriptions title="Commercial Invoice" :extra="piData.companyName" border :column="3" >
      <el-descriptions-item :label="t('su.invoice.supplier')" align="right">{{ piData.supplierName }}</el-descriptions-item>
      <el-descriptions-item :label="t('su.invoice.no')" align="right"><span class="impot">{{ piData.no }}</span></el-descriptions-item>
      <el-descriptions-item :label="t('su.invoice.invoiceDate')" align="right">{{ formatDate1(piData.invoiceDate) }}</el-descriptions-item>
      <el-descriptions-item :label="t('su.invoice.dueDate')" align="right">{{ formatDate1(piData.dueDate) }}</el-descriptions-item>
      <el-descriptions-item :label="t('su.invoice.kind')" align="right">{{ piData.kind }}</el-descriptions-item>
      <el-descriptions-item :label="t('su.invoice.customer')" align="right">{{ piData.customerName }}</el-descriptions-item>
      <el-descriptions-item :label="t('su.invoice.brand')" align="right">{{ piData.brandName }}</el-descriptions-item>
      <el-descriptions-item :label="t('su.invoice.buyer')" align="right">{{ piData.buyer }}</el-descriptions-item>
      <el-descriptions-item :label="t('su.invoice.supplerManager')" align="right">{{ piData.supplerManager }}</el-descriptions-item>
      <el-descriptions-item :label="t('su.invoice.shipTo')" align="right">{{ piData.shipTo }}</el-descriptions-item>
      <el-descriptions-item :label="t('su.invoice.po')" align="right">{{ piData.po }}</el-descriptions-item>
      <el-descriptions-item :label="t('su.invoice.notes')" align="right">{{ piData.notes }}</el-descriptions-item>
      <el-descriptions-item :label="t('su.invoice.payAction')" align="right">{{ piData.payAction }}</el-descriptions-item>
      <el-descriptions-item :label="t('su.invoice.term')" align="right">{{ piData.term }}</el-descriptions-item>
      <el-descriptions-item :label="t('su.invoice.bill')" align="right">{{ piData.bill }}</el-descriptions-item>
      <el-descriptions-item :label="t('su.invoice.remarks')" align="right">{{ piData.remarks }}</el-descriptions-item>
      <el-descriptions-item :label="t('su.invoice.count')" align="right">{{ piData.count }}</el-descriptions-item>
      <el-descriptions-item :label="t('su.invoice.exchange')" align="right">{{ piData.exchange }}</el-descriptions-item>
      <el-descriptions-item v-if="piData.kind != 'Factory'" :label="t('su.invoice.company') + '$'" align="right"><span class="impot">{{ priceFmt(piData.totalSaleUs) }}</span></el-descriptions-item>
      <el-descriptions-item v-if="piData.kind == 'Factory'" :label="t('su.invoice.company') + '¥'" align="right"><span class="impot">{{ priceFmt(piData.totalSaleRmb) }}</span></el-descriptions-item>
      <el-descriptions-item :label="t('su.invoice.purhase' + '$')" align="right"><span class="impot">{{ priceFmt(piData.totalPurhaseUs) }}</span></el-descriptions-item>
      <el-descriptions-item :label="t('su.invoice.profit'+ '$')" align="right"><span class="impot">{{ priceFmt(piData.totalProfitUs) }}</span></el-descriptions-item>
      <el-descriptions-item :label="t('su.invoice.company')" align="right">
        <span v-if="piData.kind != 'Factory'" class="impot">Company Pay Supplier: {{ priceFmt(piData.totalPurhaseUs) }}</span>
        <span v-if="piData.kind == 'Factory'" class="impot">Supplier Pay Company: {{ priceFmt(piData.totalProfitUs) }}</span>
      </el-descriptions-item>
      <el-descriptions-item :label="t('su.invoice.company')" align="right"><el-link :href="piData.invoicePdf">{{ t('action.download') }}</el-link></el-descriptions-item>
      <el-descriptions-item :label="t('su.invoice.company')" align="right"><el-link :href="piData.billPdf">{{ t('action.download') }}</el-link></el-descriptions-item>
    </el-descriptions>
  </el-card>

  <el-card style="margin-top: 20px">
    <template #header>
      <div style="display: flex">
        <span class="hed">{{ t('su.invoice.productInfo') }}</span>
        <div style="flex: 1"></div>
        <span>{{ t('su.invoice.totalSale') }}：${{piData.productSaleUs}} {{ t('su.invoice.totalPurhase') }}：${{piData.productPurhaseUs}}</span>
      </div>
    </template>
    <!-- 列表 -->
    <ContentWrap>
      <el-table v-loading="loading" :data="piData.productItems" :stripe="true" :show-overflow-tooltip="true">
        <el-table-column :label="t('su.invoice.product')" align="center" prop="productRefNo" fixed="left" width="200px"/>
        <el-table-column :label="t('su.invoice.sku')" align="center" min-width="180px" prop="skuDesc" />
        <el-table-column v-if="piData.kind != 'Factory'" :label="t('su.invoice.sale') + '$'" min-width="100px"  align="center" prop="productSaleUs">
          <template #default="scope">
            {{ priceFmt(scope.row.productSaleUs) }}
          </template>
        </el-table-column>
        <el-table-column v-if="piData.kind == 'Factory'" :label="t('su.invoice.sale') + '¥'" min-width="100px"  align="center" prop="productSaleRmb">
          <template #default="scope">
            {{ priceFmt(scope.row.productSaleRmb) }}
          </template>
        </el-table-column>
        <el-table-column :label="t('su.invoice.purhase') + '$'" min-width="130px"  align="center" prop="productPurhaseUs">
          <template #default="scope">
            {{ priceFmt(scope.row.productPurhaseUs) }}
          </template>
        </el-table-column>
        <el-table-column :label="t('su.invoice.count')" align="center" prop="count">
          <template #default="scope">
            {{ priceFmt(scope.row.count) }}
          </template>
        </el-table-column>
        <el-table-column v-if="piData.kind != 'Factory'" :label="t('su.invoice.totalSale') + '$'"  min-width="130px" align="center" prop="totalSaleUs">
          <template #default="scope">
            {{ priceFmt(scope.row.totalSaleUs) }}
          </template>
        </el-table-column>
        <el-table-column v-if="piData.kind == 'Factory'" :label="t('su.invoice.totalSale') + '¥'"  min-width="130px" align="center" prop="totalSaleRmb">
          <template #default="scope">
            {{ priceFmt(scope.row.totalSaleRmb) }}
          </template>
        </el-table-column>
        <el-table-column :label="t('su.invoice.totalPurhase') + '$'"  min-width="130px" align="center" prop="totalPurhaseUs">
          <template #default="scope">
            {{ priceFmt(scope.row.totalPurhaseUs) }}
          </template>
        </el-table-column>
      </el-table>
    </ContentWrap>
  </el-card>

  <el-card style="margin-top: 20px">
    <template #header>
      <div style="display: flex">
        <span class="hed">{{ t('su.invoice.otherInfo') }}</span>
        <div style="flex: 1"></div>
        <span>{{ t('su.invoice.totalSale') }}：${{priceFmt(piData.otherSaleUs)}} {{ t('su.invoice.totalPurhase') }}：${{priceFmt(piData.otherPurhaseUs)}}</span>
      </div>
    </template>
    <!-- 列表 -->
    <ContentWrap>
      <el-table v-loading="loading" :data="piData.otherItems" :stripe="true" :show-overflow-tooltip="true">
        <el-table-column :label="t('su.invoice.itemName')" align="center" prop="itemName" fixed="left" width="200px"/>
        <el-table-column v-if="piData.kind != 'Factory'" :label="t('su.invoice.totalSale') + '$'" min-width="100px"  align="center" prop="totalSaleUs">
          <template #default="scope">
            {{ priceFmt(scope.row.totalSaleUs) }}
          </template>
        </el-table-column>
        <el-table-column v-if="piData.kind == 'Factory'" :label="t('su.invoice.totalSale') + '¥'" min-width="100px"  align="center" prop="totalSaleRmb">
          <template #default="scope">
            {{ priceFmt(scope.row.totalSaleRmb) }}
          </template>
        </el-table-column>
        <el-table-column :label="t('su.invoice.totalPurhase') + '$'" align="center" prop="totalPurhaseUs" width="200px"/>
      </el-table>
    </ContentWrap>
  </el-card>
  <!--  <el-link :href="piData.invoicePdf" >Invoice PDF</el-link>-->
</template>

<script setup lang="ts">
import {CommercialInvoiceApi} from "@/api/su/ci";
import {formatDate1} from '@/utils/formatTime'
import { priceFmt } from '@/utils/ft'

defineOptions({name: 'CIView'})

const loading = ref(true) // 列表的加载中
const message = useMessage() // 消息弹窗
const {t} = useI18n() // 国际化
const route = useRoute() // 路由

const piData = ref({})
const getPIInfo = async () => {
  piData.value = await CommercialInvoiceApi.getCommercialInvoice(route.params.id)
  loading.value = false
}

/** 初始化 **/
onMounted(() => {
  getPIInfo()
})
</script>

<style>
  .hed {
    font-weight: bold;
  }
  .impot {
    color: red;
    font-weight: bold;
  }
</style>
